
<script>
  export default {
    name: "dymFrom",
    props: {
      formValue: {
        type: [Object]
      },
      colum: {
        type: [Array],
        default: function () {
          return []
        }
      },
      titleWidth: {
        type: [String],
        default: function () {
          return ''
        }
      },
      titleAlign: {
        type: [String],
        default: function () {
          return 'right'
        }
      }
    },
    computed: {
      newFormValue: {
        get: function () {
          return this.formValue
        },
        set: function (value) {
          this.$emit('update:formValue', value)
        }
      }
    },
    methods: {
      componentChild (h, it) {
        let that = this
        return h(it.componentName,
          {
            style: Object.assign({
              width: '100%'
            }, it.style || {}),
            class: it.class || {},
            props: Object.assign({
              dictTypeCode: it.dictTypeCode,
              value: that.newFormValue[it.value],
              clearable: it.clearable || false,
              filterable: it.filterable || false,
              multiple: it.multiple || false,
              size: it.size
            }, it.attrs || {}),
            attrs: {
              placeholder: it.placeholder,
            },
            domProps: Object.assign({}, it.comDomProps),
            on: Object.assign(it.listen || {}, {
              input: (object) => {
                this.$set(that.newFormValue, it.value, object)
              },
              selectChanged: (object) => {
              }
            })
          }
        )
      },
      slotComponentChild (h, it) {
        let childNode = []
        if (this.$scopedSlots[it.value]) {
          childNode = this.$scopedSlots[it.value](it)
        }
        return h('div',
          {
            style: Object.assign({
              width: '100%'
            }, it.style || {}),
          },
          childNode
        )
      },
      childFun (h, it) {
        let componentChilds = []
        if (it.slot) {
          componentChilds.push(this.slotComponentChild(h, it))
        } else {
          componentChilds.push(this.componentChild(h, it))
        }
        return h('el-col',
          {
            style: it.elcolStyle,
            props: Object.assign({ xs: 8, sm: 8, md: 8, lg: 8, xl: 8 }, it.colXS),
          },
          [
            h('vxe-form-item',
              {
                style: {
                  width: it.itemWidth || '100%'
                },
                props: {
                  titleWidth: it.titleWidth || (this.titleWidth || null),
                  titleAlign: it.titleAlign || this.titleAlign,
                  label: it.label || '',
                  title: it.title || '',
                  labelWidth: it.labelWidth || '0px',
                  prop: it.prop
                },
              },
              componentChilds
            )
          ]
        )
      },
      renderFun (h) {
        let childs = []
        this.colum.forEach(it => {
          childs.push(this.childFun(h, it))
        })
        return h('div', {}, childs)
      }
    },
    render(h) {
      return this.renderFun(h)
    }
  }
</script>
